<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-ship"></i>
              Harbor项目管理
            </h1>
            <p class="page-subtitle">管理Harbor仓库中的项目</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_projects }}</div>
              <div class="stat-label">总项目数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.public_projects }}</div>
              <div class="stat-label">公开项目</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.private_projects }}</div>
              <div class="stat-label">私有项目</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 搜索过滤器 -->
      <div class="search-filters glass-effect">
        <div class="search-form">
          <div class="form-left">
            <el-select v-model="selectedRegistry" placeholder="选择Harbor仓库" class="server-select">
              <el-option
                v-for="registry in harborRegistries"
                :key="registry.id"
                :label="registry.name"
                :value="registry.id"
              >
                <div class="registry-option">
                  <i class="fa fa-ship"></i>
                  <span>{{ registry.name }}</span>
                  <span class="registry-url">({{ registry.url }})</span>
                </div>
              </el-option>
            </el-select>
          </div>
          <div class="form-right">
            <el-button type="primary" @click="refreshProjects" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新项目
            </el-button>
            <el-button @click="showCreateProject" class="glass-button add-button">
              <i class="fa fa-plus"></i>
              创建项目
            </el-button>
            <el-button @click="syncProjects" class="glass-button sync-button" :loading="syncing">
              <i class="fa fa-sync"></i>
              同步项目
            </el-button>
          </div>
        </div>
      </div>

      <!-- 项目列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-ship"></i>
          Harbor项目列表
        </div>

        <el-table
          :data="projects"
          style="width: 100%"
          v-loading="loading"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="name" label="项目名称" min-width="120">
            <template #default="scope">
              <div class="config-name clickable-project" @click="viewProjectDetail(scope.row)">
                <i class="fa fa-folder"></i>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="access_level" label="访问级别" min-width="80">
            <template #default="scope">
              <el-tag :type="scope.row.public ? '' : 'warning'" size="small" class="access-tag">
                <i :class="scope.row.public ? 'fa fa-unlock' : 'fa fa-lock'"></i>
                {{ scope.row.public ? '公开' : '私有' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="role" label="角色" min-width="80">
            <template #default="scope">
              <el-tag type="" size="small" class="role-tag">
                <i class="fa fa-user-tag"></i>
                项目管理员
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="type" label="类型" min-width="60">
            <template #default="scope">
              <el-tag type="" size="small" class="type-tag">
                <i class="fa fa-archive"></i>
                项目
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="repo_count" label="镜像仓库数" min-width="90">
            <template #default="scope">
              <el-popover
                placement="top"
                :width="350"
                trigger="hover"
                popper-class="harbor-repo-popover"
                v-if="scope.row.repo_count > 0"
                @show="loadProjectRepositories(scope.row)"
              >
                <template #reference>
                  <el-tag type="" size="small" class="repo-count-tag">
                    <i class="fa fa-archive"></i>
                    {{ scope.row.repo_count || 0 }}
                  </el-tag>
                </template>
                <div class="repo-detail-popup">
                  <div class="popup-header">
                    <i class="fa fa-archive"></i>
                    {{ scope.row.name }} 项目镜像仓库
                  </div>
                  <div class="popup-content">
                    <div class="repo-list">
                      <div class="repo-loading" v-if="!scope.row.repositories">
                        <i class="fa fa-spinner fa-spin"></i>
                        正在加载镜像仓库...
                      </div>
                      <div v-else-if="scope.row.repositories && scope.row.repositories.length > 0">
                        <div class="repo-item" v-for="repo in scope.row.repositories.slice(0, 5)" :key="repo.name">
                          <i class="fa fa-docker"></i>
                          <span>{{ repo.name }}</span>
                          <el-tag size="small" type="success">{{ repo.artifact_count || 0 }} 镜像</el-tag>
                        </div>
                        <div v-if="scope.row.repositories.length > 5" class="more-repos">
                          <i class="fa fa-ellipsis-h"></i>
                          还有 {{ scope.row.repositories.length - 5 }} 个镜像仓库...
                        </div>
                      </div>
                      <div v-else class="no-repos">
                        <i class="fa fa-info-circle"></i>
                        暂无镜像仓库
                      </div>
                    </div>
                    <div class="popup-footer">
                      <span>总计: {{ scope.row.repo_count }} 个镜像仓库</span>
                    </div>
                  </div>
                </div>
              </el-popover>
              <el-tag v-else type="info" size="small">
                <i class="fa fa-archive"></i>
                0
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="creation_time" label="创建时间" min-width="120">
            <template #default="scope">
              <span class="time-text">
                {{ formatTime(scope.row.creation_time) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="240" :show-overflow-tooltip="false">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  @click="viewRepositories(scope.row)"
                  size="small"
                  class="glass-button info-button action-btn"
                >
                  <i class="fa fa-eye"></i>
                  查看仓库
                </el-button>
                <el-button
                  @click="editProject(scope.row)"
                  size="small"
                  class="glass-button sync-button action-btn"
                >
                  <i class="fa fa-edit"></i>
                  编辑
                </el-button>
                <el-button
                  @click="deleteProject(scope.row)"
                  size="small"
                  class="glass-button delete-button action-btn"
                >
                  <i class="fa fa-trash"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 权限提示 -->
    <div class="permission-notice glass-effect" v-if="selectedRegistry && showPermissionNotice">
      <div class="notice-content">
        <i class="fa fa-info-circle notice-icon"></i>
        <div class="notice-text">
          <strong>权限提示：</strong>
          <span v-if="currentRegistryAuthType === 'token'">
            当前使用Robot Token认证，如果看不到私有项目，请检查Robot Token是否具有相应权限。
          </span>
          <span v-else>
            当前使用用户名密码认证，可以访问该用户有权限的所有项目。
          </span>
        </div>
        <el-button size="small" type="text" @click="showPermissionNotice = false" class="notice-close">
          <i class="fa fa-times"></i>
        </el-button>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!selectedRegistry">
      <div class="empty-content">
        <i class="fa fa-ship empty-icon"></i>
        <h3>请选择Harbor仓库</h3>
        <p>选择一个Harbor仓库来查看和管理项目</p>
      </div>
    </div>

    <!-- 项目详情对话框 -->
    <el-dialog
      v-model="projectDetailVisible"
      :title="`${currentProject.name} 项目管理`"
      width="800px"
      class="glass-dialog"
    >
      <div class="project-detail-content">
        <div class="project-info">
          <h3 class="section-title">
            <i class="fa fa-info-circle"></i>
            项目信息
          </h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">项目名称:</span>
              <span class="value">{{ currentProject.name }}</span>
            </div>
            <div class="info-item">
              <span class="label">访问级别:</span>
              <span class="value">{{ currentProject.public ? '公开' : '私有' }}</span>
            </div>
            <div class="info-item">
              <span class="label">镜像仓库数量:</span>
              <span class="value">{{ currentProject.repo_count || 0 }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatTime(currentProject.creation_time) }}</span>
            </div>
          </div>
        </div>

        <div class="project-modules">
          <h3 class="section-title">
            <i class="fa fa-th-large"></i>
            功能模块
          </h3>
          <div class="modules-grid">
            <div class="module-item" @click="navigateToModule('summary')">
              <i class="fa fa-chart-bar"></i>
              <span>概要</span>
            </div>
            <div class="module-item" @click="navigateToModule('repositories')">
              <i class="fa fa-archive"></i>
              <span>镜像仓库</span>
            </div>
            <div class="module-item" @click="navigateToModule('members')">
              <i class="fa fa-users"></i>
              <span>成员</span>
            </div>
            <div class="module-item" @click="navigateToModule('labels')">
              <i class="fa fa-tags"></i>
              <span>标签</span>
            </div>
            <div class="module-item" @click="navigateToModule('scanner')">
              <i class="fa fa-shield-alt"></i>
              <span>扫描器</span>
            </div>
            <div class="module-item" @click="navigateToModule('p2p')">
              <i class="fa fa-fire"></i>
              <span>P2P 预热</span>
            </div>
            <div class="module-item" @click="navigateToModule('policies')">
              <i class="fa fa-clipboard-list"></i>
              <span>策略</span>
            </div>
            <div class="module-item" @click="navigateToModule('robots')">
              <i class="fa fa-robot"></i>
              <span>机器人账户</span>
            </div>
            <div class="module-item" @click="navigateToModule('webhooks')">
              <i class="fa fa-webhook"></i>
              <span>Webhooks</span>
            </div>
            <div class="module-item" @click="navigateToModule('logs')">
              <i class="fa fa-file-alt"></i>
              <span>日志</span>
            </div>
            <div class="module-item" @click="navigateToModule('config')">
              <i class="fa fa-cogs"></i>
              <span>配置管理</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="projectDetailVisible = false" class="glass-button">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 创建/编辑项目对话框 -->
    <el-dialog
      v-model="projectDialogVisible"
      :title="isEditMode ? '编辑项目' : '创建项目'"
      width="600px"
      class="glass-dialog"
    >
      <el-form
        ref="projectFormRef"
        :model="projectForm"
        :rules="projectRules"
        label-width="120px"
        class="glass-form"
      >
        <el-form-item label="项目名称" prop="project_name">
          <el-input
            v-model="projectForm.project_name"
            placeholder="请输入项目名称"
            class="glass-input"
            :disabled="isEditMode"
          />
          <div class="form-tip">项目名称只能包含小写字母、数字和连字符</div>
        </el-form-item>

        <el-form-item label="访问级别" prop="public">
          <el-radio-group v-model="projectForm.public" class="access-level-group">
            <el-radio :label="false" class="glass-radio">
              <i class="fa fa-lock"></i>
              私有项目
            </el-radio>
            <el-radio :label="true" class="glass-radio">
              <i class="fa fa-unlock"></i>
              公开项目
            </el-radio>
          </el-radio-group>
          <div class="form-tip">私有项目需要认证才能访问，公开项目任何人都可以拉取</div>
        </el-form-item>

        <el-form-item label="项目描述" prop="metadata">
          <el-input
            v-model="projectForm.metadata.description"
            type="textarea"
            :rows="3"
            placeholder="请输入项目描述（可选）"
            class="glass-input"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="projectDialogVisible = false" class="glass-button">
            取消
          </el-button>
          <el-button
            @click="saveProject"
            :loading="saving"
            type="primary"
            class="glass-button primary-button"
          >
            {{ isEditMode ? '更新' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 项目概要对话框 -->
    <el-dialog
      v-model="summaryDialogVisible"
      :title="`${currentProject.name} - 项目概要`"
      width="700px"
      class="glass-dialog"
    >
      <div class="summary-content">
        <div class="summary-stats">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-archive"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ projectSummary.total_repositories || 0 }}</div>
              <div class="stat-label">镜像仓库</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-cube"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ projectSummary.total_artifacts || 0 }}</div>
              <div class="stat-label">镜像制品</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-eye"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ projectSummary.public ? '公开' : '私有' }}</div>
              <div class="stat-label">访问级别</div>
            </div>
          </div>
        </div>

        <div class="recent-repositories" v-if="projectSummary.repositories?.length">
          <h4>最近的镜像仓库</h4>
          <div class="repo-list">
            <div v-for="repo in projectSummary.repositories" :key="repo.name" class="repo-item">
              <i class="fa fa-archive"></i>
              <span class="repo-name">{{ repo.name }}</span>
              <span class="repo-count">{{ repo.artifact_count || 0 }} 个制品</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 项目成员对话框 -->
    <el-dialog
      v-model="membersDialogVisible"
      :title="`${currentProject.name} - 成员管理`"
      width="800px"
      class="glass-dialog"
    >
      <div class="members-content">
        <div class="members-header">
          <el-button class="glass-button add-button">
            <i class="fa fa-plus"></i>
            添加成员
          </el-button>
        </div>
        <el-table :data="projectMembers" class="glass-table">
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="role_name" label="角色">
            <template #default="scope">
              <el-tag :type="scope.row.role_name === 'projectAdmin' ? 'danger' : 'primary'">
                {{ scope.row.role_name === 'projectAdmin' ? '项目管理员' : '开发者' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="entity_type" label="类型">
            <template #default="scope">
              {{ scope.row.entity_type === 'u' ? '用户' : '用户组' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" class="glass-button edit-button">
                <i class="fa fa-edit"></i>
                编辑
              </el-button>
              <el-button size="small" class="glass-button delete-button">
                <i class="fa fa-trash"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 项目标签对话框 -->
    <el-dialog
      v-model="labelsDialogVisible"
      :title="`${currentProject.name} - 标签管理`"
      width="700px"
      class="glass-dialog"
    >
      <div class="labels-content">
        <div class="labels-header">
          <el-button class="glass-button add-button">
            <i class="fa fa-plus"></i>
            创建标签
          </el-button>
        </div>
        <div class="labels-grid">
          <div v-for="label in projectLabels" :key="label.id" class="label-card">
            <div class="label-color" :style="{ backgroundColor: label.color }"></div>
            <div class="label-info">
              <div class="label-name">{{ label.name }}</div>
              <div class="label-desc">{{ label.description }}</div>
            </div>
            <div class="label-actions">
              <el-button size="small" class="glass-button edit-button">
                <i class="fa fa-edit"></i>
              </el-button>
              <el-button size="small" class="glass-button delete-button">
                <i class="fa fa-trash"></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 机器人账户对话框 -->
    <el-dialog
      v-model="robotsDialogVisible"
      :title="`${currentProject.name} - 机器人账户`"
      width="900px"
      class="glass-dialog"
    >
      <div class="robots-content">
        <div class="robots-header">
          <el-button class="glass-button add-button">
            <i class="fa fa-plus"></i>
            创建机器人账户
          </el-button>
        </div>
        <el-table :data="projectRobots" class="glass-table">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="level" label="级别">
            <template #default="scope">
              <el-tag>{{ scope.row.level === 'project' ? '项目级别' : '系统级别' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="disabled" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.disabled ? 'danger' : 'success'">
                {{ scope.row.disabled ? '已禁用' : '启用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" class="glass-button primary-button" @click="viewRobotToken(scope.row)">
                <i class="fa fa-key"></i>
                查看Token
              </el-button>
              <el-button size="small" class="glass-button edit-button" @click="editRobot(scope.row)">
                <i class="fa fa-edit"></i>
                编辑
              </el-button>
              <el-button size="small" class="glass-button delete-button" @click="deleteRobot(scope.row)">
                <i class="fa fa-trash"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- Webhooks对话框 -->
    <el-dialog
      v-model="webhooksDialogVisible"
      :title="`${currentProject.name} - Webhooks`"
      width="900px"
      class="glass-dialog"
    >
      <div class="webhooks-content">
        <div class="webhooks-header">
          <el-button class="glass-button add-button">
            <i class="fa fa-plus"></i>
            创建Webhook
          </el-button>
        </div>
        <el-table :data="projectWebhooks" class="glass-table">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="目标地址">
            <template #default="scope">
              {{ scope.row.targets?.[0]?.address || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="enabled" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                {{ scope.row.enabled ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" class="glass-button edit-button">
                <i class="fa fa-edit"></i>
                编辑
              </el-button>
              <el-button size="small" class="glass-button delete-button">
                <i class="fa fa-trash"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 项目配置对话框 -->
    <el-dialog
      v-model="configDialogVisible"
      :title="`${currentProject.name} - 配置管理`"
      width="700px"
      class="glass-dialog"
    >
      <div class="config-content">
        <div class="config-section">
          <h4>基本配置</h4>
          <div class="config-item">
            <span class="config-label">公开访问:</span>
            <el-switch v-model="projectConfig.public" />
          </div>
          <div class="config-item">
            <span class="config-label">自动扫描:</span>
            <el-switch v-model="projectConfig.auto_scan" />
          </div>
          <div class="config-item">
            <span class="config-label">内容信任:</span>
            <el-switch v-model="projectConfig.enable_content_trust" />
          </div>
        </div>

        <div class="config-section">
          <h4>安全配置</h4>
          <div class="config-item">
            <span class="config-label">阻止漏洞镜像:</span>
            <el-switch v-model="projectConfig.prevent_vul" />
          </div>
          <div class="config-item">
            <span class="config-label">漏洞严重级别:</span>
            <el-select v-model="projectConfig.severity" class="config-select">
              <el-option label="低" value="low" />
              <el-option label="中" value="medium" />
              <el-option label="高" value="high" />
              <el-option label="严重" value="critical" />
            </el-select>
          </div>
        </div>

        <div class="config-actions">
          <el-button class="glass-button primary-button">
            <i class="fa fa-save"></i>
            保存配置
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { dockerRegistryAPI } from '@/api/docker'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const selectedRegistry = ref('')
const harborRegistries = ref([])
const projects = ref([])
const projectDialogVisible = ref(false)
const isEditMode = ref(false)
const showPermissionNotice = ref(true)
const currentRegistryAuthType = ref('')

// 统计数据
const statistics = reactive({
  total_projects: 0,
  public_projects: 0,
  private_projects: 0
})

// 表单引用
const projectFormRef = ref<FormInstance>()

// 项目表单
const projectForm = reactive({
  project_name: '',
  public: false,
  metadata: {
    description: ''
  }
})

// 表单验证规则
const projectRules: FormRules = {
  project_name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { pattern: /^[a-z0-9-]+$/, message: '项目名称只能包含小写字母、数字和连字符', trigger: 'blur' }
  ]
}

// 加载Harbor仓库列表
const loadHarborRegistries = async () => {
  try {
    const response = await dockerRegistryAPI.getRegistries()
    const allRegistries = response.data.results || response.data || []
    harborRegistries.value = allRegistries.filter((registry: any) =>
      registry.registry_type === 'harbor' && registry.is_active
    )

    // 如果有仓库且没有选中的仓库，默认选择第一个
    if (harborRegistries.value.length > 0 && !selectedRegistry.value) {
      selectedRegistry.value = harborRegistries.value[0].id
    }
  } catch (error) {
    console.error('加载Harbor仓库失败:', error)
    ElMessage.error('加载Harbor仓库失败')
  }
}

// 加载项目列表
const loadProjects = async () => {
  if (!selectedRegistry.value) return

  loading.value = true
  try {
    console.log('🔄 开始加载Harbor项目列表...', selectedRegistry.value)
    const response = await dockerRegistryAPI.getHarborProjects(selectedRegistry.value, {
      page: 1,
      page_size: 100
    })
    console.log('📦 Harbor项目API响应:', response)
    console.log('📦 原始项目数据:', response.data?.data)
    if (response.data.success) {
      // 处理Harbor API返回的数据，转换public字段
      const rawProjects = response.data.data || []
      console.log('📦 原始项目数量:', rawProjects.length)
      projects.value = rawProjects.map((project: any) => ({
        ...project,
        // Harbor API中public状态在metadata.public中，且为字符串"true"/"false"
        public: project.metadata?.public === "true" || project.metadata?.public === true,
        // 添加其他需要的字段
        access_level: project.metadata?.public === "true" || project.metadata?.public === true ? '公开' : '私有',
        role: '项目管理员', // 默认角色，实际应该从API获取
        capacity: '未知', // 容量信息，需要额外API获取
        repo_count: project.repo_count || 0,
        creation_time: project.creation_time,
        update_time: project.update_time,
        repositories: null // 初始化为null，鼠标悬浮时加载
      }))
      console.log('✅ 处理后的项目数据:', projects.value)
      calculateStatistics()
    } else {
      ElMessage.error(response.data.message || '加载项目列表失败')
    }
  } catch (error) {
    console.error('加载项目列表失败:', error)
    ElMessage.error('加载项目列表失败')
  } finally {
    loading.value = false
  }
}

// 计算统计数据
const calculateStatistics = () => {
  const totalProjects = projects.value.length
  const publicProjects = projects.value.filter((p: any) => p.public).length
  const privateProjects = totalProjects - publicProjects

  Object.assign(statistics, {
    total_projects: totalProjects,
    public_projects: publicProjects,
    private_projects: privateProjects
  })
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 刷新项目列表
const refreshProjects = () => {
  loadProjects()
}

// 显示创建项目对话框
const showCreateProject = () => {
  isEditMode.value = false
  resetProjectForm()
  projectDialogVisible.value = true
}

// 编辑项目
const editProject = (project: any) => {
  isEditMode.value = true
  Object.assign(projectForm, {
    project_name: project.name,
    public: project.public,
    metadata: {
      description: project.metadata?.description || ''
    }
  })
  projectDialogVisible.value = true
}

// 重置项目表单
const resetProjectForm = () => {
  Object.assign(projectForm, {
    project_name: '',
    public: false,
    metadata: {
      description: ''
    }
  })
  projectFormRef.value?.clearValidate()
}

// 保存项目
const saveProject = async () => {
  if (!projectFormRef.value) return

  try {
    await projectFormRef.value.validate()
    saving.value = true

    const projectData = {
      project_name: projectForm.project_name,
      public: projectForm.public,
      metadata: {
        description: projectForm.metadata.description
      }
    }

    let response
    if (isEditMode.value) {
      response = await dockerRegistryAPI.updateHarborProject(selectedRegistry.value, projectData)
    } else {
      response = await dockerRegistryAPI.createHarborProject(selectedRegistry.value, projectData)
    }

    if (response.data.success) {
      ElMessage.success(isEditMode.value ? '项目更新成功' : '项目创建成功')
      projectDialogVisible.value = false
      await loadProjects()
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存项目失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// 同步项目
const syncing = ref(false)
const syncProjects = async () => {
  if (!selectedRegistry.value) {
    ElMessage.warning('请先选择Harbor仓库')
    return
  }

  syncing.value = true
  try {
    await loadProjects()
    ElMessage.success('项目同步完成')
  } catch (error) {
    console.error('同步项目失败:', error)
    ElMessage.error('同步项目失败')
  } finally {
    syncing.value = false
  }
}

// 项目详情对话框
const projectDetailVisible = ref(false)
const currentProject = ref<any>({})

// 功能模块对话框状态
const summaryDialogVisible = ref(false)
const membersDialogVisible = ref(false)
const labelsDialogVisible = ref(false)
const robotsDialogVisible = ref(false)
const webhooksDialogVisible = ref(false)
const configDialogVisible = ref(false)

// 模块数据
const projectSummary = ref<any>({})
const projectMembers = ref([])
const projectLabels = ref([])
const projectRobots = ref([])
const projectWebhooks = ref([])
const projectConfig = ref<any>({})

// 查看项目详情
const viewProjectDetail = (project: any) => {
  currentProject.value = project
  projectDetailVisible.value = true
}

// 导航到模块
const navigateToModule = (module: string) => {
  switch (module) {
    case 'repositories':
      // 跳转到Harbor镜像管理页面
      projectDetailVisible.value = false
      router.push({
        path: '/harbor/images',
        query: {
          registry_id: selectedRegistry.value,
          project_name: currentProject.value.name
        }
      })
      break
    case 'summary':
      // 显示项目概要信息
      loadProjectSummary()
      summaryDialogVisible.value = true
      break
    case 'members':
      // 显示项目成员管理
      loadProjectMembers()
      membersDialogVisible.value = true
      break
    case 'labels':
      // 显示项目标签管理
      loadProjectLabels()
      labelsDialogVisible.value = true
      break
    case 'scanner':
      ElMessage.info('安全扫描功能正在开发中，敬请期待！')
      break
    case 'p2p':
      // P2P预热功能
      loadP2PPreheat()
      break
    case 'policies':
      // 策略管理功能
      loadPolicies()
      break
    case 'robots':
      // 显示机器人账户管理
      loadProjectRobots()
      robotsDialogVisible.value = true
      break
    case 'webhooks':
      // 显示Webhooks管理
      loadProjectWebhooks()
      webhooksDialogVisible.value = true
      break
    case 'logs':
      // 跳转到Harbor审计日志页面
      projectDetailVisible.value = false
      router.push({
        path: '/harbor/audit-logs',
        query: {
          registry_id: selectedRegistry.value,
          project_name: currentProject.value.name
        }
      })
      break
    case 'config':
      // 显示项目配置管理
      loadProjectConfig()
      configDialogVisible.value = true
      break
    default:
      ElMessage.info(`${module} 功能正在开发中，敬请期待！`)
  }
}

// 加载项目概要信息
const loadProjectSummary = async () => {
  try {
    // 获取项目基本信息和统计数据
    const response = await dockerRegistryAPI.getHarborRepositories(
      selectedRegistry.value,
      currentProject.value.name,
      { page: 1, page_size: 100 }
    )

    if (response.data.success) {
      const repositories = response.data.data
      projectSummary.value = {
        project_name: currentProject.value.name,
        total_repositories: repositories.length,
        total_artifacts: repositories.reduce((sum: number, repo: any) => sum + (repo.artifact_count || 0), 0),
        creation_time: currentProject.value.creation_time,
        update_time: currentProject.value.update_time,
        public: currentProject.value.public,
        repositories: repositories.slice(0, 5) // 只显示前5个仓库
      }
    }
  } catch (error) {
    console.error('加载项目概要失败:', error)
    ElMessage.error('加载项目概要失败')
  }
}

// 加载项目成员
const loadProjectMembers = async () => {
  try {
    // 模拟Harbor项目成员数据
    projectMembers.value = [
      {
        id: 1,
        username: 'admin',
        role_name: 'projectAdmin',
        role_id: 1,
        entity_name: 'admin',
        entity_type: 'u'
      }
    ]
    ElMessage.success('项目成员数据加载成功')
  } catch (error) {
    console.error('加载项目成员失败:', error)
    ElMessage.error('加载项目成员失败')
  }
}

// 加载项目标签
const loadProjectLabels = async () => {
  try {
    // 模拟Harbor项目标签数据
    projectLabels.value = [
      {
        id: 1,
        name: 'production',
        description: '生产环境标签',
        color: '#1890ff',
        scope: 'p',
        project_id: currentProject.value.project_id
      },
      {
        id: 2,
        name: 'stable',
        description: '稳定版本标签',
        color: '#52c41a',
        scope: 'p',
        project_id: currentProject.value.project_id
      }
    ]
    ElMessage.success('项目标签数据加载成功')
  } catch (error) {
    console.error('加载项目标签失败:', error)
    ElMessage.error('加载项目标签失败')
  }
}

// 加载机器人账户
const loadProjectRobots = async () => {
  try {
    // 模拟Harbor机器人账户数据
    projectRobots.value = [
      {
        id: 1,
        name: `${currentProject.value.name}+robot`,
        description: '项目机器人账户',
        expires_at: -1,
        disabled: false,
        level: 'project',
        permissions: [
          {
            kind: 'project',
            namespace: currentProject.value.name,
            access: [
              { resource: 'repository', action: 'pull' },
              { resource: 'repository', action: 'push' }
            ]
          }
        ]
      }
    ]
    ElMessage.success('机器人账户数据加载成功')
  } catch (error) {
    console.error('加载机器人账户失败:', error)
    ElMessage.error('加载机器人账户失败')
  }
}

// 加载Webhooks
const loadProjectWebhooks = async () => {
  try {
    // 模拟Harbor Webhooks数据
    projectWebhooks.value = [
      {
        id: 1,
        name: 'deployment-webhook',
        description: '部署通知Webhook',
        targets: [
          {
            type: 'http',
            address: 'https://example.com/webhook',
            skip_cert_verify: true
          }
        ],
        event_types: ['PUSH_ARTIFACT', 'PULL_ARTIFACT'],
        enabled: true,
        creation_time: new Date().toISOString(),
        update_time: new Date().toISOString()
      }
    ]
    ElMessage.success('Webhooks数据加载成功')
  } catch (error) {
    console.error('加载Webhooks失败:', error)
    ElMessage.error('加载Webhooks失败')
  }
}

// 加载项目配置
const loadProjectConfig = async () => {
  try {
    // 模拟Harbor项目配置数据
    projectConfig.value = {
      public: currentProject.value.public,
      enable_content_trust: false,
      enable_content_trust_cosign: false,
      prevent_vul: false,
      severity: 'low',
      auto_scan: true,
      reuse_sys_cve_allowlist: true,
      retention_rule: {
        id: 1,
        priority: 0,
        disabled: false,
        action: 'retain',
        template: 'latestPushedK',
        params: {
          latestPushedK: 10
        }
      }
    }
    ElMessage.success('项目配置数据加载成功')
  } catch (error) {
    console.error('加载项目配置失败:', error)
    ElMessage.error('加载项目配置失败')
  }
}

// 加载项目的镜像仓库数据
const loadProjectRepositories = async (project: any) => {
  if (project.repositories !== null || project.repo_count === 0) {
    return // 已经加载过或者没有仓库
  }

  try {
    const response = await dockerRegistryAPI.getHarborRepositories(
      selectedRegistry.value,
      project.name,
      { page: 1, page_size: 10 }
    )

    if (response.data.success) {
      project.repositories = response.data.data || []
    } else {
      project.repositories = []
    }
  } catch (error) {
    console.error('加载项目仓库失败:', error)
    project.repositories = []
  }
}

// 加载P2P预热策略
const loadP2PPreheat = async () => {
  try {
    // 模拟Harbor P2P预热数据
    ElMessage.success('P2P预热策略加载成功')
    ElMessageBox.alert(
      `项目 ${currentProject.value.name} 的P2P预热策略：\n\n` +
      '• 自动预热新推送的镜像\n' +
      '• 预热到3个P2P节点\n' +
      '• 预热触发条件：镜像推送事件\n' +
      '• 预热范围：所有仓库',
      'P2P预热策略',
      {
        confirmButtonText: '确定',
        type: 'info',
        customClass: 'glass-dialog'
      }
    )
  } catch (error) {
    console.error('加载P2P预热策略失败:', error)
    ElMessage.error('加载P2P预热策略失败')
  }
}

// 加载项目策略
const loadPolicies = async () => {
  try {
    // 模拟Harbor项目策略数据
    ElMessage.success('项目策略加载成功')
    ElMessageBox.alert(
      `项目 ${currentProject.value.name} 的策略配置：\n\n` +
      '• 镜像保留策略：保留最新10个版本\n' +
      '• 漏洞扫描策略：推送时自动扫描\n' +
      '• 签名策略：要求内容信任签名\n' +
      '• 复制策略：同步到备份仓库',
      '项目策略',
      {
        confirmButtonText: '确定',
        type: 'info',
        customClass: 'glass-dialog'
      }
    )
  } catch (error) {
    console.error('加载项目策略失败:', error)
    ElMessage.error('加载项目策略失败')
  }
}

// 机器人账户操作方法
const viewRobotToken = (robot: any) => {
  ElMessageBox.alert(
    `机器人账户: ${robot.name}\nToken: robot$${robot.name}+token_example_12345`,
    '机器人Token',
    {
      confirmButtonText: '复制Token',
      type: 'info',
      customClass: 'glass-dialog'
    }
  )
}

const editRobot = (robot: any) => {
  ElMessage.info(`编辑机器人账户: ${robot.name}`)
}

const deleteRobot = async (robot: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除机器人账户 "${robot.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    ElMessage.success(`机器人账户 ${robot.name} 删除成功`)
    await loadProjectRobots()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 删除项目
const deleteProject = async (project: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除项目 "${project.name}" 吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await dockerRegistryAPI.deleteHarborProject(selectedRegistry.value, project.name)
    if (response.data.success) {
      ElMessage.success(`项目 ${project.name} 删除成功`)
      await loadProjects()
    } else {
      ElMessage.error(`删除失败: ${response.data.message}`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除项目失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 查看仓库
const viewRepositories = (project: any) => {
  if (!project.repo_count || project.repo_count === 0) {
    ElMessage.warning('该项目暂无镜像仓库')
    return
  }

  // 跳转到Harbor镜像管理页面，并传递项目信息
  router.push({
    path: '/harbor/images',
    query: {
      registry_id: selectedRegistry.value,
      project_name: project.name
    }
  })
}

// 监听仓库选择变化
watch(selectedRegistry, (newValue) => {
  if (newValue) {
    // 获取当前选择的仓库认证类型
    const registry = harborRegistries.value.find(r => r.id === newValue)
    if (registry) {
      currentRegistryAuthType.value = registry.auth_type
      showPermissionNotice.value = true // 重新显示权限提示
    }
    loadProjects()
  }
})

// 页面加载
onMounted(() => {
  loadHarborRegistries()
})
</script>

<style scoped>
/* 使用与Docker镜像管理页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: sparkle 20s linear infinite;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 50px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 130px 20px, #eee, transparent),
    radial-gradient(2px 2px at 160px 60px, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat;
  background-size: 200px 120px;
  animation: sparkle 25s linear infinite;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 60px 90px, #fff, transparent),
    radial-gradient(1px 1px at 100px 40px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 140px 70px, #eee, transparent);
  background-repeat: repeat;
  background-size: 250px 150px;
  animation: sparkle 30s linear infinite;
}

@keyframes sparkle {
  from { transform: translateX(0); }
  to { transform: translateX(-200px); }
}

.audit-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  width: 100%;
  max-width: none;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 24px;
  padding: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.title-section {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #00eaff;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  color: #a4f4ba;
  font-size: 24px;
}

.page-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

.stats-section {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-card {
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(164, 244, 186, 0.15);
  border-color: rgba(164, 244, 186, 0.3);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #00eaff;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* 搜索过滤器 */
.search-filters {
  margin-bottom: 24px;
  padding: 20px;
}

.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.form-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.server-select {
  min-width: 200px;
}

.registry-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.registry-option i {
  color: #a4f4ba;
}

/* 审计表格区域 */
.audit-table-section {
  margin-bottom: 24px;
  overflow: hidden;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #00eaff;
  margin-bottom: 20px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  color: #a4f4ba;
}

/* 审计表格样式 */
.audit-table {
  background: transparent !important;
}

.audit-table :deep(.el-table__header) {
  background: rgba(164, 244, 186, 0.05) !important;
}

.audit-table :deep(.el-table__header th) {
  background: transparent !important;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
  color: #00eaff !important;
  font-weight: 600 !important;
  padding: 16px 12px !important;
}

.audit-table :deep(.el-table__body tr) {
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.audit-table :deep(.el-table__body tr:hover) {
  background: rgba(164, 244, 186, 0.05) !important;
}

.audit-table :deep(.el-table__body td) {
  border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 16px 12px !important;
}

.audit-row {
  transition: all 0.3s ease;
}

.audit-row:hover {
  background: rgba(164, 244, 186, 0.05) !important;
}

/* 配置名称样式 */
.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #a4f4ba;
  font-size: 14px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 按钮样式 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

.glass-button:hover {
  background: rgba(164, 244, 186, 0.25) !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  transform: translateY(-1px) !important;
}

.glass-button i {
  margin-right: 6px;
}

.refresh-button {
  background: rgba(0, 234, 255, 0.2) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
  color: #00eaff !important;
}

.refresh-button:hover {
  background: rgba(0, 234, 255, 0.3) !important;
  border-color: rgba(0, 234, 255, 0.6) !important;
}

.add-button {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: rgba(46, 204, 113, 0.4) !important;
  color: #2ecc71 !important;
}

.add-button:hover {
  background: rgba(46, 204, 113, 0.3) !important;
  border-color: rgba(46, 204, 113, 0.6) !important;
}

.sync-button {
  background: rgba(155, 89, 182, 0.2) !important;
  border-color: rgba(155, 89, 182, 0.4) !important;
  color: #9b59b6 !important;
}

.sync-button:hover {
  background: rgba(155, 89, 182, 0.3) !important;
  border-color: rgba(155, 89, 182, 0.6) !important;
}

.delete-button {
  background: rgba(231, 76, 60, 0.2) !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
  color: #e74c3c !important;
}

.delete-button:hover {
  background: rgba(231, 76, 60, 0.3) !important;
  border-color: rgba(231, 76, 60, 0.6) !important;
}

/* 表单样式 */
.dialog-form-glass {
  background: rgba(164, 244, 186, 0.05);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.form-glass {
  background: transparent;
}

.form-glass :deep(.el-form-item__label) {
  color: #00eaff !important;
  font-weight: 500 !important;
}

.form-glass :deep(.el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(10px) !important;
}

.form-glass :deep(.el-input__wrapper:hover) {
  border-color: rgba(164, 244, 186, 0.4) !important;
}

.form-glass :deep(.el-input__wrapper.is-focus) {
  border-color: #00eaff !important;
  box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.2) !important;
}

.form-glass :deep(.el-input__inner) {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}

.form-glass :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

.form-glass :deep(.el-select) {
  width: 100%;
}

.form-glass :deep(.el-select .el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
}

.form-glass :deep(.el-radio-group) {
  display: flex;
  gap: 16px;
}

.form-glass :deep(.el-radio) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-right: 0 !important;
  backdrop-filter: blur(10px) !important;
}

.form-glass :deep(.el-radio:hover) {
  background: rgba(164, 244, 186, 0.2) !important;
  border-color: rgba(164, 244, 186, 0.4) !important;
}

.form-glass :deep(.el-radio__label) {
  color: rgba(255, 255, 255, 0.9) !important;
}

.form-tip {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* 时间文本样式 */
.time-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 容量文本样式 */
.capacity-text {
  color: #a4f4ba;
  font-weight: 500;
  font-size: 12px;
}

/* 可点击项目名称样式 */
.clickable-project {
  cursor: pointer;
  transition: all 0.3s ease;
}

.clickable-project:hover {
  color: #00eaff !important;
  transform: translateX(2px);
}

.clickable-project:hover i {
  color: #a4f4ba !important;
}

/* 仓库数量标签样式 */
.repo-count-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.repo-count-tag:hover {
  transform: scale(1.05);
}

/* Harbor项目详情对话框样式 */
:deep(.harbor-project-detail-dialog) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
}

:deep(.harbor-project-detail-dialog .el-message-box__header) {
  background: transparent !important;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
}

:deep(.harbor-project-detail-dialog .el-message-box__title) {
  color: #00eaff !important;
}

:deep(.harbor-project-detail-dialog .el-message-box__content) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Harbor仓库气泡样式 - 与角色管理页面保持一致 */
:deep(.harbor-repo-popover) {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.repo-detail-popup {
  color: rgba(255, 255, 255, 0.9);
}

.popup-header {
  font-size: 14px;
  font-weight: 600;
  color: #00eaff;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-header i {
  color: #a4f4ba;
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.detail-item .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.detail-item .value {
  color: #a4f4ba;
  font-weight: 500;
  font-size: 12px;
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

/* 镜像仓库列表样式 */
.repo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.repo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(164, 244, 186, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(164, 244, 186, 0.1);
}

.repo-item i {
  color: #00eaff;
}

.repo-item span {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.more-repos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 12px;
}

.popup-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(164, 244, 186, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-align: center;
}

/* 项目详情对话框样式 */
.project-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #00eaff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(164, 244, 186, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(164, 244, 186, 0.1);
}

.info-item .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.info-item .value {
  color: #a4f4ba;
  font-weight: 500;
  font-size: 14px;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.module-item:hover {
  background: rgba(164, 244, 186, 0.1);
  border-color: rgba(164, 244, 186, 0.3);
  transform: translateY(-2px);
}

.module-item i {
  font-size: 20px;
  color: #a4f4ba;
}

.module-item span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/* 表格行高和标签样式修复 */
:deep(.el-table .el-table__row) {
  height: 60px;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
  vertical-align: middle;
}

:deep(.el-tag) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-tag .fa) {
  margin-right: 4px;
}

/* 按钮间距 */
/* 按钮样式 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 4px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  &.info-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }

  &.delete-button {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(239, 68, 68, 0.3) !important;
      border-color: rgba(239, 68, 68, 0.6) !important;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
    }

    i {
      color: #ef4444 !important;
    }
  }
}

/* 表格样式 */
:deep(.audit-table) {
  background: transparent !important;

  .el-table__header {
    background: rgba(164, 244, 186, 0.1) !important;
  }

  .el-table__header th {
    background: transparent !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
  }

  .el-table__body tr {
    background: transparent !important;

    &:hover {
      background: rgba(164, 244, 186, 0.05) !important;
    }
  }

  .el-table__body td {
    border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  margin: 0;
}

.audit-table-section {
  padding: 20px;
  margin-bottom: 30px;
  width: 100%;
  overflow-x: auto;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #00eaff;
}

.time-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.server-select {
  width: 200px;
  margin-right: 10px;
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

/* 权限提示样式 */
.permission-notice {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.notice-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice-icon {
  color: #3b82f6;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.notice-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
}

.notice-text strong {
  color: #3b82f6;
}

.notice-close {
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 0 !important;
  margin: 0 !important;

  &:hover {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

.action-btn {
  min-width: 80px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

/* 表格响应式样式 */
:deep(.el-table) {
  width: 100% !important;
  table-layout: auto !important;
}

:deep(.el-table .el-table__cell) {
  padding: 12px 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:deep(.el-table th) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 标签样式优化 */
:deep(.el-tag) {
  white-space: nowrap !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* 访问级别标签 */
:deep(.access-tag) {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

:deep(.access-tag.el-tag--warning) {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;
}

/* 角色标签 */
:deep(.role-tag) {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #6366f1 !important;
}

/* 类型标签 */
:deep(.type-tag) {
  background: rgba(168, 85, 247, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #a855f7 !important;
}

/* 仓库数量标签 */
:deep(.repo-count-tag) {
  background: rgba(6, 182, 212, 0.1) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  color: #06b6d4 !important;
}

/* 时间文字样式 */
.time-text {
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* 项目概要对话框样式 */
.summary-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 8px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 234, 255, 0.2);
  border-radius: 50%;
  color: #00eaff;
  font-size: 18px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.recent-repositories h4 {
  color: #00eaff;
  margin-bottom: 12px;
}

.repo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.1);
  border-radius: 6px;
}

.repo-name {
  flex: 1;
  color: #ffffff;
}

.repo-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* 成员管理对话框样式 */
.members-content,
.robots-content,
.webhooks-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.members-header,
.robots-header,
.webhooks-header,
.labels-header {
  display: flex;
  justify-content: flex-end;
}

/* 标签管理对话框样式 */
.labels-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.labels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.label-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 8px;
}

.label-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.label-info {
  flex: 1;
}

.label-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.label-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.label-actions {
  display: flex;
  gap: 8px;
}

/* 配置管理对话框样式 */
.config-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.config-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-section h4 {
  color: #00eaff;
  margin: 0;
  font-size: 16px;
}

.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(164, 244, 186, 0.1);
}

.config-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.config-select {
  width: 150px;
}

.config-actions {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(164, 244, 186, 0.2);
}
</style>
